<template>
  <div class="vue-box">
    <!-- 表格 -->
    <div style="padding: 0 1em;">
      <div class="c-title">菜单预览</div>
      <!-- 树插件 -->
      <el-tree v-if="dataList.length > 0" ref="tree" :data="dataList" node-key="id" :default-expand-all="true">
        <span slot-scope="s" class="custom-tree-node">
          <span v-if="s.data.hidden !== true" style="color: #2D8CF0;">{{ s.data.meta && s.data.meta.title }}</span>
          <span v-else style="color: #999;">{{ s.data.meta && s.data.meta.title }} （隐藏）</span>
        </span>
      </el-tree>
      <br><br><br>
    </div>
  </div>
</template>

<script>

export default {
  name: 'preview',
  data() {
    return {
      dataList: [],	// 数据集合
    }
  },
  created() {
    // 全部
    this.dataList = sa.$sys.getCurm()
  },
  methods: {}
}
</script>

<style scoped>
.vue-box>>>.el-tree {
  background-color: #eee;
}

.vue-box>>>.el-tree-node {
  margin: 0.15em 0 !important;
}

/* 悬浮时颜色更深一点 */
.vue-box>>>.el-tree-node__content:hover {
  background-color: #CFE8FC !important;
}
</style>
